/*
 * Fill in claim
 * Fill in goals
 * 	What would resolution of this disagreement accomplish?
 *  Is that worth arguing over?
 * 	Yes, continue.  No, close map.
 * Fill in premises if necessary
 * Start supporting argument with reasons and evidence
 * 
 * Bubbles stay open until user finishes editing node 
 */

//create grey boxes
function userGuidanceInit(){
	var fruitsGrey = document.createElement("div");
	fruitsGrey.id = "fruitsGrey";
	fruitsGrey.style.width = fruitsContainer.offsetWidth + 5 + "px";
	fruitsGrey.style.height = fruitsContainer.offsetHeight + 5 + "px";
	fruitsGrey.style.top = fruitsContainer.offsetTop + 16 + "px";
	fruitsGrey.style.left = fruitsContainer.offsetLeft + "px";
	document.body.appendChild(fruitsGrey);
	
	var goalsGrey = document.createElement("div");
	goalsGrey.id = "goalsGrey";
	goalsGrey.style.width = goalsContainer.offsetWidth + 2 + "px";
	goalsGrey.style.height = goalsContainer.offsetHeight + 5 + "px";
	goalsGrey.style.top = goalsContainer.offsetTop + 16 + "px";
	goalsGrey.style.left = goalsContainer.offsetLeft - 2 + "px";
	document.body.appendChild(goalsGrey);

	var premisesGrey = document.createElement("div");
	premisesGrey.id = "premisesGrey";
	premisesGrey.style.width = premisesContainer.offsetWidth + "px";
	premisesGrey.style.height = premisesContainer.offsetHeight + 9 + "px";
	premisesGrey.style.top = premisesContainer.offsetTop + 16 + "px";
	premisesGrey.style.left = premisesContainer.offsetLeft + "px";
	document.body.appendChild(premisesGrey);

	var argumentsGrey = document.createElement("div");
	argumentsGrey.id = "argumentsGrey";
	argumentsGrey.style.width = argumentsContainer.offsetWidth + "px";
	argumentsGrey.style.height = argumentsContainer.offsetHeight + 10 + "px";
	argumentsContainer.appendChild(argumentsGrey);
	
}

function guide(){
	
	claimInfoFunction();
}

function claimInfoFunction(){

	//claim info box	
	var claimInfo = document.createElement("div");
	claimInfo.innerText = "What is the argument about?\n\n"+
							"For example:\n"+
							'"The Earth is round"';
	claimInfo.id = "claimInfo";
	claimInfo.className = "info";
	document.body.appendChild(claimInfo);
	
	//press enter info
	var pressEnter = document.createElement("div");
	pressEnter.innerText = "Press enter when done";
	pressEnter.id = "pressEnter";
	pressEnter.className = "info";
	document.body.appendChild(pressEnter);

	//remove info boxes after user hits enter
	//then move to next guide step	
	handlers.claimDone = function (){
										if(event.keyCode === 13){
											event.preventDefault();
											document.body.removeChild(pressEnter);
											document.body.removeChild(claimInfo);
											claim.editField.removeEventListener("keyup", handlers.claimDone, false);
											fruitsInfoFunction();
										}
									};
	
	claim.editField.addEventListener("keyup", handlers.claimDone , false);
}

function fruitsInfoFunction(){
	
	//remove grey box
	fruitsGrey.style.display = "none";
	
	var fruits = newFruit();
	fruits.editField.focus();
	
	//info box
	var fruitsInfo = document.createElement("div");
	fruitsInfo.innerText = "Why argue about this?\n"+
							"What are the fruits of this argument?" +
							"\n\nFor example:\n" +
							'"Determine if it is possible to sail west to India"';
	fruitsInfo.id = "fruitsInfo";
	fruitsInfo.className = "info";
	document.body.appendChild(fruitsInfo);

	
	handlers.fruitsDone = function (){
										if(event.keyCode === 13){
											event.preventDefault();
											document.body.removeChild(fruitsInfo);
											fruits.editField.removeEventListener("keyup", handlers.fruitsDone, false);
											//restore hotkeys function listener
											fruits.editField.addEventListener('keydown', handlers.hotkeys, false);
											
											/*  None of the users look at this
											//create a reminder that the argument should be worth arguing over
											var worthItReminder = document.createElement("div");
											worthItReminder.innerText = "Is that worth an argument?";
											worthItReminder.id = "worthItReminder";
											worthItReminder.className = "info";
											document.body.appendChild(worthItReminder);
											
											//remove the reminder after 4 seconds
											//worthItReminder.style.opacity = 0;  //transition not working
											var t1=setTimeout("document.body.removeChild(worthItReminder);", 9000);
											*/
											
											goalsInfoFunction();
										}
									};
	//this prevents the hotkeys function from firing first	
	fruits.editField.removeEventListener('keydown', handlers.hotkeys, false);
	
	fruits.editField.addEventListener("keyup", handlers.fruitsDone , false);
}

function goalsInfoFunction(){
	
	//remove grey box
	goalsGrey.style.display = "none";
	
	var goal = newGoal();
	goal.editField.focus();
	
	//info box
	var goalInfo = document.createElement("div");
	goalInfo.innerText = "What are the goals of the arguers?" +
								"\nReasoning must agree with the goals." +
								"\n\nFor example:" +
								'\n"1. Discover new trade route to India"' +
								'\n"2. Become wealthy"';
	goalInfo.id = "goalsInfo";
	goalInfo.className = "info";
	document.body.appendChild(goalInfo);

	
	handlers.goalDone = function (){
										if(event.keyCode === 13){
											event.preventDefault();
											document.body.removeChild(goalInfo);
											goal.editField.removeEventListener("keyup", handlers.goalDone, false);
											//restore hotkeys function listener
											goal.editField.addEventListener('keydown', handlers.hotkeys, false);
											
											premisesInfoFunction();
										}
									};
	//this prevents the hotkeys function from firing first	
	goal.editField.removeEventListener('keydown', handlers.hotkeys, false);
	
	goal.editField.addEventListener("keyup", handlers.goalDone , false);
	
}

function premisesInfoFunction(){
	
	//remove grey box
	premisesGrey.style.display = "none";
	
	var premise = newPremise();
	premise.editField.focus();
	
	//info box
	var premiseInfo = document.createElement("div");
	premiseInfo.innerText = "Premises are claims that are already accepted to be true.";
	premiseInfo.id = "premisesInfo";
	premiseInfo.className = "info";
	document.body.appendChild(premiseInfo);

	
	handlers.premiseDone = function (){
										if(event.keyCode === 13){
											event.preventDefault();
											document.body.removeChild(premiseInfo);
											premise.editField.removeEventListener("keyup", handlers.premiseDone, false);
											//restore hotkeys function listener
											premise.editField.addEventListener('keydown', handlers.hotkeys, false);
											
											nodeInfoFunction();
										}
									};
	//this prevents the hotkeys function from firing first	
	premise.editField.removeEventListener('keydown', handlers.hotkeys, false);
	
	premise.editField.addEventListener("keyup", handlers.premiseDone , false);
	
}

function nodeInfoFunction(){
	
	//remove grey box
	argumentsGrey.style.display = "none";
	
	claim.spawnChild("support");
		
	//info box
	var nodeInfo = document.createElement("div");
	nodeInfo.innerText ="This is a support node.  " +		
						"The 4 buttons create:" +
						"\nsupport, evidence, attack, and assist nodes." +
						"\n\nHelp has more information about these." +
						"\nHelp also contains an example argument map.";
	nodeInfo.id = "nodeInfo";
	nodeInfo.className = "info";
	document.body.appendChild(nodeInfo);
	
	//okay button
	var nodeOkayButton = document.createElement("div");
	nodeOkayButton.innerText = "Okay";
	nodeOkayButton.id = "nodeOkayButton";
	nodeOkayButton.className = "info";
	document.body.appendChild(nodeOkayButton);

	nodeOkayButton.addEventListener("click", function(){
		document.body.removeChild(nodeInfo);
		document.body.removeChild(nodeOkayButton);
		connectionsInfoFunction();
	})
	
}

function connectionsInfoFunction(){
	//info box
	var connectionsInfo = document.createElement("div");
	connectionsInfo.innerText = "If reasoning is not logical," +
								"\nclick on a connection and set it to a logical fallacy."; 
	connectionsInfo.id = "connectionsInfo";
	connectionsInfo.className = "info";
	document.body.appendChild(connectionsInfo);
	
	//okay button
	var connectionsOkayButton = document.createElement("div");
	connectionsOkayButton.innerText = "Okay";
	connectionsOkayButton.id = "connectionsOkayButton";
	connectionsOkayButton.className = "info";
	document.body.appendChild(connectionsOkayButton);

	connectionsOkayButton.addEventListener("click", function(){
		document.body.removeChild(connectionsInfo);
		document.body.removeChild(connectionsOkayButton);
	})

}

function showHotkeys(){
	//show the hotkeys at the bottom, then have them fade out after a while.
	//make it clear that the user can click on something near the bottom that will make the hotkeys appear again.
}

